<template>
  <transition name="slide">
    <musicList :title="title" :bgImage="bgImage" :songList="songList" :songFans="songFans" :songTotal="songTotal"/>
  </transition>
</template>

<script>
import { mapGetters } from "vuex";
import musicList from "@/components/music-list/music-list";
export default {
    data(){
        return {
            songList:[],
            songFans:"",
            songTotal:""
        }   
    },
    methods: {
    getDetail(mid) {
        let body={
            mid:mid
        }
        this.$axios
            .post("http://localhost:1111/api/singerDetail", JSON.stringify(body))
            .then(res => {
                // console.log(res)
                this.songList=res.data.songList||res.data[0].songList
                this.songFans=res.data.fansTotalNumber||res.data[0].fansTotalNumber
                this.songTotal=res.data.songTotalNumber||res.data[0].songTotalNumber
            });
        }
    },
    created() {
        this.getDetail(this.mid);
    },
    components: {
        musicList
    },
    computed: {
        ...mapGetters(["singer"]),
        title() {
            //歌手名称
            return this.singer.singer_name;
        },
        bgImage() {
            //歌曲图片
            return this.singer.singer_pic;
        },
        mid() {
            //歌手id
            return this.singer.singer_mid;
        }
    }
};
</script>

<style lang="stylus" scoped>
.slide-enter-active, .slide-leave-active {
  transition: all 0.3s;
}

.slide-enter, .slide-leave-to {
  transform: translate3d(100%, 0, 0);
}
</style>